<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>地图导航</title>
	<style>
		* {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 100%;
            height: 100vh;
            background-color: #fff;
        }

        .target-content {
            width: 200px;
            height: 35px;
            padding: 0 5px;
            background-color: #EC7B00;
            border-radius: 5px;
        }

        .target-text {
            line-height: 35px;
            text-align: center;
            font-size: 12px;
            font-weight: 300;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


        .arrowStyle {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-color: #EC7B00 transparent transparent transparent;
            position: absolute;
            left: 100px;
            top: 30px
        }

        .my-content {
            width: 28px;
            height: 28px;
            background-color: #f33;
            border-radius: 14px;
        }

        .my-text {
            line-height: 28px;
            text-align: center;
            font-size: 12px;
            font-weight: 300;
            color: #fff;
        }


        .myArrowStyle {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-color: #f33 transparent transparent transparent;
            position: absolute;
            left: 4px;
            top: 23px
        }
	</style>
</head>
<body>
<div id="container"></div>

<script type="text/javascript">
	window._AMapSecurityConfig = {
        securityJsCode: "1407cf5116cbc5cf00ef192fe9e6acd7",
    };
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=884994b3847b24760092896714f29dbf">
</script>
<script type="text/javascript">
	var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.410212, 39.905027],
        zoom: 16
    });

    map.clearMap(); // 清除地图覆盖物


    // 重新定位
    function getLocation(lon, lat) {
        var contentMy = '' +
            '<div>' +
            '<div class="my-content">' +
            '<p class="my-text">我</p>' +
            '</div>' +
            '<p class="myArrowStyle" />' +
            '</div>';
        // 重新定位
        map.setZoomAndCenter(16, [lon, lat], true)
        // 当前位置标点
        new AMap.Marker({
            map: map,
            content: contentMy,
            position: [lon, lat],
            offset: new AMap.Pixel(-13, -30)
        });
    }

    // 显示点位
    function pushPoint(json) {
        // 处理数据
        let points = JSON.parse(json)
        points.forEach(function(point) {
            new AMap.Marker({
                map: map,
                content: contentHandler(point.text),
                position: [point.lon, point.lat],
                offset: new AMap.Pixel(-13, -30)
            });
        })
    }

    // 处理内容
    function contentHandler(text) {
        return '' +
            '<div>' +
            '<div class="target-content">' +
            '<p class="target-text">' +
            text +
            '</p>' +
            '</div>' +
            '<p class="arrowStyle" />' +
            '</div>';
    }

    window.onload = function() {
        if (window.eh) {
            window.eh.getLocation()
            window.eh.pushPoint()
        }
    }
</script>
</body>
</html>
